<template>
    <div class="box">
        <header class="header">分类</header>
        <div class="content">
            <div class="sidebar">
                <van-sidebar class="left" v-model="active" @change="onChange">
                    <van-sidebar-item title="手机数码" />
                    <van-sidebar-item title="礼品鲜花" />
                    <van-sidebar-item title="男装女装" />
                </van-sidebar>
                <ul class="right">
                    <h3>{{ list[0] && list[0].classify }}</h3>
                    <div class="list">
                        <li v-for="item in list">
                            <img :src="item.image" alt="">
                            <p>{{ item.title }}</p>
                        </li>
                    </div>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            active: 0,
            list: []
        }
    },
    created() {
        this.onChange(0)
    },
    methods: {
        onChange(index) { // 0  1   2
            const arr = ['手机数码', '礼品鲜花', '男装女装']
            request.get('/kind', {
                params: { key: arr[index] }
            }).then(res => {
                if (res.data.code == 200) {
                    this.list = res.data.data
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.sidebar {
    display: flex;

    .left {
        width: 100px;
    }

    .right {
        flex: 1;

        h3 {
            margin-bottom: 10px;
        }

        .list {
            display: flex;
            /* 弹性布局 换行 */
            flex-wrap: wrap;

            li {
                width: 30%;
                margin: 1.5%;

                img {
                    width: 100%;
                }
            }

        }
    }


}
</style>